<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/vCloak.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common/common.css" />
	</head>
	<style type="text/css">
		body {
			background: #fff;
		}
		
		.mui-bar-nav~.mui-content {
			background: #F3F3EF;
			padding-bottom: 50px;
		}
		
		.goread {
			font-size: 12px;
			padding: 12px 0;
		}
		
		.audio_main {
			height: 220px;
			overflow: hidden;
			text-align: center;
			background: url(../../imges/19873667124290424.png);
			padding: 18px 0 28px;
			position: relative;
			background-size: cover;
		}
		
		.audio_title {
			margin-bottom: 10px;
			font-size: 18px;
			font-weight: bold;
			color: #fff;
		}
		
		.audiotxt_main {
			line-height: 26px;
			max-height: 104px;
			overflow: hidden;
		}
		
		.audiotxt_main>div {
			color: #D4E6F9;
		}
		
		.audio_switch {
			position: absolute;
			bottom: 8px;
			left: 12px;
			width: 40px;
		}
		
		.audio_switch>img {
			width: 100%;
			vertical-align: middle;
		}
		
		.whenlong {
			position: absolute;
			right: 16px;
			bottom: 12px;
			color: #fff;
		}
		
		.word {
			margin-top: 16px;
			font-size: 16px;
			color: #666;
		}
		
		.message {
			margin-bottom: 10px;
			background: #fff;
		}
		
		.criticism {
			width: 100%;
			overflow: hidden;
			padding: 16px;
			border-top: 1px solid #f2f2f2;
		}
		
		.like>div {
			width: 18px;
			display: inline-block;
			vertical-align: text-bottom;
		}
		
		.like>div>img {
			border-radius: 50%;
			border: 2px solid #fff;
			width: 170%;
			vertical-align: middle;
		}
		
		.like>div>div {
			border-radius: 50%;
			border: 2px solid #fff;
			width: 170%;
			height: 30px;
			background: #21B0FD;
			text-align: center;
			color: #fff;
			font-size: 12px;
			line-height: 26px;
		}
		
		.like_zang img {
			width: 50%;
			vertical-align: middle;
		}
		
		.like {
			float: left;
			display: none;
		}
		
		.comment,
		.translate {
			float: right;
			line-height: 30px;
			color: #999;
		}
		
		.comment button,
		.translate button {
			border-radius: 50px;
			line-height: 16px;
		}
		
		.floor {
			display: flex;
			border-bottom: 1px solid #f2f2f2;
			padding: 16px 22px 22px 16px;
		}
		
		.comment_main {
			font-size: 16px;
		}
		
		.floor_name,
		.message_name {
			font-weight: bold;
		}
		
		.floor:last-child {
			border: none;
		}
		
		.floor_img {
			margin-right: 8px;
			flex: 1;
		}
		
		.avatar {
			border-radius: 50%;
			overflow: hidden;
			width: 40px;
		}
		
		.avatar img {
			width: 100%;
			vertical-align: middle;
		}
		
		.comment_time>div {
			display: inline-block;
		}
		
		.floor_data {
			vertical-align: top;
			flex: 8;
		}
		
		.comment_time {
			font-size: 12px;
			color: #666;
		}
		
		.comment_main {
			margin-top: 4px;
			color: #666;
		}
		
		.no {
			text-align: center;
			margin-top: 55px;
			color: #B2B2B2;
			font-size: 12px;
		}
		
		.mui-bar-tab {
			background: #fff;
			display: flex;
			line-height: 50px;
			-webkit-box-shadow: none;
			box-shadow: none;
			border-top: 1px solid #E6E6E6;
			position: fixed;
			bottom: 0;
		}
		
		.mui-bar-tab>.bar_inp {
			flex: 1;
			text-align: center;
			margin-left: 20px;
		}
		
		.com_icon {
			display: flex;
			margin-right: 20px;
			text-align: center;
		}
		
		.bar_inp>input {
			width: 100%;
			border-radius: 50px;
			border: 1px solid #E6E6E6;
			height: 30px;
			padding-left: 10px;
			font-size: 14px;
		}
		
		.floor {
			background: #fff;
		}
		
		.comment_num {
			color: #7F7F7F;
			border-bottom: 1px solid #f2f2f2;
			background: #fff;
			padding: 12px 16px;
		}
		
		.reviewer {
			display: flex;
			padding: 16px 16px 18px 16px;
		}
		
		.reviewer_img {
			width: 40px;
			margin-right: 8px;
			border-radius: 50%;
			overflow: hidden;
		}
		
		.reviewer_img>img {
			width: 100%;
			height: 100%;
			vertical-align: middle;
		}
		
		.statistics {
			display: flex;
			text-align: center;
			flex: 1;
		}
		
		.statistics>div {
			flex: 1;
		}
		
		.reviewer_data {
			flex: 2;
		}
		
		.com_icon>div {
			width: 16px;
			margin: 0px 14px;
		}
		
		.com_icon .sendout {
			width: initial;
			display: none;
			margin: 0 0 0 14px;
		}
		
		.com_icon img {
			width: 100%;
			vertical-align: middle;
		}
		
		.reviewer_data_rank,
		.zang {
			color: #999;
		}
		
		.num {
			color: #7F7F7F;
		}
		/*音乐*/
		
		.aplayer-music,
		.aplayer-pic,
		.mask,
		.aplayer .aplayer-lrc:before,
		.aplayer .aplayer-lrc:after {
			display: none !important;
		}
		
		.aplayer-info {
			margin: 0 !important;
		}
		
		.aplayer-withlrc.aplayer .aplayer-info {
			height: initial !important;
		}
		
		.aplayer {
			box-shadow: none !important;
		}
		
		.aplayer-withlrc.aplayer .aplayer-lrc {
			padding: 60px 0;
		}
		
		.aplayer-controller {
			position: absolute !important;
			width: 100%;
			left: 0;
			bottom: 4px;
			padding: 8px 0;
		}
		
		.aplayer .aplayer-info .aplayer-controller .aplayer-time {
			position: absolute !important;
			bottom: 4px;
		}
		
		.aplayer-bar-wrap {
			margin: 0 90px 0 64px !important;
			position: relative;
			z-index: 100;
		}
		
		.aplayer-time {
			width: 100%;
		}
		
		.aplayer-dtime {
			position: absolute;
			right: 44px;
			color: #fff;
		}
		
		.aplayer-ptime {
			position: absolute;
			left: 20px;
			color: #fff;
		}
		
		.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
			position: absolute;
			right: 16px;
		}
		
		.suspend,
		.playback {
			width: 50px;
			position: absolute;
			left: 50%;
			margin-left: -25px;
			top: 50%;
			margin-top: -25px;
			z-index: 1000;
		}
		
		.suspend {
			display: none;
		}
		
		.suspend img,
		.playback img {
			width: 100%;
			vertical-align: top;
		}
		
		.backdrop {
			width: 100%;
			height: 100%;
			position: absolute;
			background: #000;
			z-index: 1000;
			opacity: 0.2;
		}
		
		.aplayer .aplayer-info .aplayer-controller {
			display: none !important;
		}
		
		.aplayer-played {
			background: #fff !important;
		}
		
		.aplayer .aplayer-lrc p {
			font-size: 14px !important;
			color: #fff !important;
		}
		
		.fixed {
			position: fixed;
			z-index: 100;
			width: 100%;
			top: 44px;
		}
		
		#pullrefresh {
			position: absolute;
			width: 100%;
			top: 220px;
		}
	</style>

	<body>
		<div class="rendering" :caseUid="list.caseUid">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">朗读详情</h1>
				<a class="mui-pull-right goread">我来朗读</a>
			</header>

			<div class="fixed">
				<div class="backdrop"></div>
				<div class="audio_main">
					<div class="suspend">
						<img src="../../imges/438861395395594868.png" />
					</div>
					<div class="playback">
						<img src="../../imges/309498569541043143.png" />
					</div>
					<div id="player3" class="aplayer"></div>
				</div>
			</div>
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">

					<div class="main">

						<div class="message">
							<div class="reviewer">
								<div class="reviewer_img"><img :src="list.readerAvatar" v-cloak/></div>
								<div class="reviewer_data">
									<div class="reviewer_data_name" v-cloak>{{list.readerName}}</div>
									<div class="reviewer_data_rank" v-cloak>{{list.desc}}</div>
								</div>
								<div class="statistics">
									<div>
										<div class="num" v-cloak>{{list.likeCount }}</div>
										<div class="zang">点赞</div>
									</div>
									<!--<div>
										<div class="num">{{list.score }}</div>
										<div class="zang">得分</div>
									</div>-->
								</div>
							</div>
							<div class="criticism">
								<div class="like">
									<div><img src="../../imges/Mask Group 34.png" /></div>
									<div><img src="../../imges/Mask Group 34.png" /></div>
									<div><img src="../../imges/Mask Group 34.png" /></div>
									<div><img src="../../imges/Mask Group 34.png" /></div>
									<div><img src="../../imges/Mask Group 34.png" /></div>
									<div>
										<div class="like_zang">
											<img src="../../imges/Union 229.png" />
										</div>
									</div>
								</div>
								<div class="comment" v-if="list.isMySelf" v-cloak><button type="button" class="mui-btn mui-btn-success">再来一次</button></div>
								<div class="comment" v-else v-cloak><button type="button" class="mui-btn mui-btn-success">我来试一试</button></div>
							</div>
						</div>
					</div>
					<div>
						<div class="comment_num" v-cloak>
							评论({{total}})
						</div>
						<div class="floor" v-for="queryComment in queryComment">
							<div class="floor_img">
								<div class="avatar"><img :src="queryComment.avatar" v-cloak/></div>
							</div>
							<div class="floor_data">
								<div class="floor_name" v-cloak>{{queryComment.loginAccountName}}</div>
								<div class="comment_time">
									<div class="comment_day"><span v-cloak>{{queryComment.commentDate}}</span></div>
								</div>
								<div class="comment_main" v-cloak>
									{{queryComment.commentContent}}
								</div>
							</div>
						</div>
						<!--<div class="floor">
							<div class="floor_img"><img src="../../imges/Mask Group 34.png" /></div>
							<div class="floor_data">
								<div class="floor_name">克鲁尼</div>
								<div class="comment_time">
									<div class="comment_day">2017-07-19</div>
									<div class="comment_hour">11:00</div>
								</div>
								<div class="comment_main">
									在运营商业务和企业业务的增速大幅放 缓后，华为的营收增长将主要来自智能 手机业务。
								</div>
							</div>
						</div>-->
					</div>
				</div>
			</div>
			<nav class="mui-bar mui-bar-tab">
				<div class="bar_inp"><input type="text" name="" id="" placeholder="写评论.." /></div>
				<div class="com_icon">
					<div class="scroll"><img src="../../imges/Subtraction 87.png" /></div>
					<div>
						<div v-show="list.hasLike" class="haslike">
							<img src="../../imges/863820316318456120.png" />
						</div>
						<div v-show="!list.hasLike" class="praise">
							<img src="../../imges/14773541549643298.png" />
						</div>
					</div>
					<div class="sendout"><button type="button" class="mui-btn mui-btn-primary">发送</button></div>
				</div>
			</nav>
		</div>
		<script src="../../js/libs/aplayers.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common/common.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var temp = 1
			var reads = new Vue({
				el: '.rendering',
				data: {
					list: [],
					queryComment: [],
					total: ''
				}
			})

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var obj = self.parameter;
				$(".rendering").attr("readingrecorduid", obj.readingrecorduid)
				common.ajax("student/reading/queryDetail", {
					uid: common.uid,
					token: common.token,
					readingRecordUid: obj.readingrecorduid
				}, function(data) {
					if(data.code == 200) {
						synchronization(data)
						rendering(data)
					} else {
						mui.toast(data.message)
					}
				}, "get")

				function synchronization(data) {

					var time = []
					$.each(data.data.caseTimeList, function(e, a) {
						time.push(a.split(".").join(":") + '.00')
					})
					var temp = ""
					for(var i = 0; i < data.data.caseLycList.length; i++) {
						temp += '[' + time[i] + ']' + data.data.caseLycList[i] + "\n"
					}
					var ap3 = new APlayer({
						element: document.getElementById('player3'),
						narrow: false,
						autoplay: false,
						showlrc: 1,
						mutex: true,
						theme: '#615754',
						preload: 'metadata',
						mode: 'circulation',
						music: {
							title: data.data.caseName,
							author: '',
							url: data.data.readingUrl,
							pic: '',
							lrc: temp
						}
					});

					$(".playback").on("tap", function() {
						$(this).hide()
						$(".suspend").show()
						$(".backdrop").hide()
						$(".aplayer-controller").css("display", "block !important")
						clearTime = setTimeout(sethide, 3000)
						ap3.play()
						//					sethide()
					})
					var clearTime = ""
					$(".suspend").on("tap", function(e) {
						$(this).hide()
						ap3.pause()
						$(".playback").show()
						$(".backdrop").show()
						$(".aplayer-controller").css("display", "none !important")
						clearTimeout(clearTime)
						e.stopPropagation()
					})
					var kai = false

					$(".aplayer-lrc").on("tap", function() {
						if(kai) {
							$(".suspend").show()
							$(".aplayer-controller").css("display", "block !important")
							kai = false
							clearTime = setTimeout(sethide, 3000)
						} else {
							$(".suspend").hide()
							$(".aplayer-controller").css("display", "none !important")
							kai = true
							clearTimeout(clearTime)
						}
					})
					$(".aplayer-controller").on("tap", function() {
						clearTimeout(clearTime)
						clearTime = setTimeout(sethide, 5000)
					})

					function sethide() {
						$(".suspend").hide()
						$(".aplayer-controller").css("display", "none !important")
						kai = true
					}
					ap3.on('ended', function() {
						$(".suspend").hide()
						$(".playback").show()
						$(".backdrop").show()
						$(".aplayer-controller").css("display", "none !important")
					});
					ap3.on('pause', function() {
						$(".suspend").hide()
						$(".playback").show()
						$(".backdrop").show()
						$(".aplayer-controller").css("display", "none !important")
					});
					reads.$nextTick(function() {
						$(".praise").on("tap", function() {
							common.ajax("student/reading/like", {
								uid: common.uid,
								token: common.token,
								readingRecordUid: obj.readingrecorduid
							}, function(data) {
								if(data.code == 200) {
									$(".num").text(Number($(".num").text()) + 1)
									$(".haslike").css("display", "block")
									$(".praise").css("display", "none")
								} else {
									mui.toast(data.message)
								}
							})
						})
					})

					/*我来试一试*/
					$(document).on("tap", ".comment", function() {
						var obj = {
							"caseuid": $(".rendering").attr("caseUid"),
							"plancaseuid": ""
						}
						ap3.pause()
						common.open("play.html", "play.html", obj)
					})
					$(document).on("tap", ".goread", function() {
						ap3.pause()
						common.open("addread.html", "addread.html", '')
					})
				}

				function rendering(data) {
					reads.list = data.data
				}
				$(".bar_inp").on("focus", "input", function() {
					$(".com_icon").find("div").hide()
					$(".sendout").show()
				}).on("blur", "input", function() {
					$(".com_icon").find("div").show()
					$(".sendout").hide()
				})
				$(".sendout").on("tap", function() {
					$(".bar_inp").find("input").focus()
					$(".com_icon").find("div").hide()
					$(".sendout").show()
					if($(".bar_inp").find("input").val() == "") {
						return
					}
					common.ajax("student/reading/comment", {
						uid: common.uid,
						token: common.token,
						readingRecordUid: obj.readingrecorduid,
						commentContent: $(".bar_inp").find("input").val()
					}, function(data) {
						if(data.code == 200) {
							$(".bar_inp").find("input").val("")
							temp = 1
							reads.queryComment = []
							refresh()
							mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);
							mui('#pullrefresh').pullRefresh().refresh(true);
							mui.toast("发布成功")
						} else {
							mui.toast(data.message)
						}
					})
				})
				refresh()
				$(".scroll").on("tap", function() {
					mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);
				})
			})

			function refresh() {
				if(mui.os.plus) {
					mui.plusReady(function() {
						setTimeout(function() {
							mui('#pullrefresh').pullRefresh().pullupLoading();
						}, 300);

					});
				} else {
					mui.ready(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					});
				}
			}

			function pullupRefresh() {
				common.ajax("student/reading/queryComment", {
					uid: common.uid,
					token: common.token,
					readingRecordUid: $(".rendering").attr("readingrecorduid"),
					page: temp++,
					pageSize: 8
				}, function(data) {
					//					console.log(data)
					if(!data.data.hasNextPage) {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh();
					}
					//					console.log(data)
					reads.total = data.data.total
					for(var i = 0; i < data.data.list.length; i++) {
						reads.queryComment.push(data.data.list[i])
					}
				}, "get")
			}
		</script>
	</body>

</html>